<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 原生ajax(局部刷新)的开发流程
        // 1. 网页中发生一个事件（页面加载、按钮点击）
        // 2. 由 JavaScript 创建 XMLHttpRequest 对象（用于和后台交互数据）
        // 3. XMLHttpRequest 对象向 web 服务器发送请求 open("get/post","服务器的url","true")与服务器建立连接  send() 发送到服务器
        // 4. 服务器处理该请求(需要使用JavaWeb中的技术来处理)
        // 5. 服务器将响应发送回网页
        // 6. 由 JavaScript 读取响应 responseText读取后台的数据
        // 7. 由 JavaScript 执行正确的动作（比如更新页面）    document.getElementById("demo").innerHTML = this.responseText;

        function ajax(url,fnSucc,fnFail) {
            //1 .创建ajax核心对象XMLHttpRequest
            var oAjax = new XMLHttpRequest();
            //2. 向服务器发请求
            oAjax.open("get",url,true);
            oAjax.send();
            oAjax.onreadystatechange = function() {
            if (oAjax.readyState == 4 && oAjax.status == 200) {  //响应已就绪
                // document.getElementById("demo").innerHTML = this.responseText;
                    fnSucc(oAjax.responseText);
                }else {
                    fnFail(oAjax.status)
                }
            };            
        }
        window.onload = function() {
            //根据id获取到button节点
            let oBtn = document.getElementById("btn1");
            oBtn.onclick = function() {
               ajax('前端说明.txt',function(str){
                    alert(str);
               },function(str){
                    alert(str);
               });
            }
        }
    </script>
</head>
<body>
    <input type="button" value="ajax操作" id="btn1">
    <!-- <div id="box1"></div> -->
</body>
</html>